<template>
  <!-- @closed="editing=false" 关闭屉式菜单  重置编辑状态为不编辑 -->
  <van-action-sheet
    :value="value"
    @closed="editing = false"
    @input="$emit('input', $event)"
    title="编辑频道"
  >
    <div class="channel">
      <div class="tit">
        我的频道：
        <span class="tip">点击可进入频道</span>
        <van-button
          v-if="!editing"
          @click="editing = true"
          size="mini"
          type="info"
          plain
          >编辑</van-button
        >
        <van-button
          v-else
          @click="editing = false"
          size="mini"
          type="danger"
          plain
          >完成</van-button
        >
      </div>
      <!-- 我的频道 -->
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="(channel, i) in myChannels" :key="channel.id">
          <span
            class="f12"
            @click="enterChannel(i)"
            :class="{ red: activeIndex === i }"
            >{{ channel.name }}</span
          >
          <!-- 删除频道按钮 -->
          <van-icon
            @click="delChannel(channel.id, i)"
            v-show="editing"
            class="btn"
            name="cross"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道 -->
    <div class="channel">
      <div class="tit">可选频道：</div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="channel in canSel" :key="channel.id">
          <span class="f12">{{ channel.name }}</span>
          <van-icon
            @click="addChannel(channel)"
            class="btn"
            name="plus"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
// 导入获取所有频道数据接口
import { getAllChannels, delChannel, addChannel } from '@/api/channel'
export default {
  props: {
    // 打开/关闭的状态
    value: {
      type: Boolean,
      default: false
    },
    // 我的频道数据(父组件传过来的)
    myChannels: {
      type: Array,
      default: () => []
    }, // 当前选中的频道
    activeIndex: {
      type: Number,
      default: 0
    }

  },
  computed: {
    /**
 * 获取可选频道数据
 * 公式：可选频道(剩下的) = 所有频道 - 我的频道（减法）
 * 实现思路：所有频道=》使用数组的filter方法=》过滤我的频道数据
 * 在计算属性中实现减法=》实时计算变化
 */
    canSel () {
      return this.allChannels.filter((all) => {
        return !this.myChannels.some((my) => my.id === all.id)
      })
    }
  },
  data () {
    return {
      // 编辑状态
      editing: false,
      // 所有频道数据
      allChannels: []
    }
  },
  created () {
    this.getAll()
  },
  methods: {
    // 从可选频道添加数据到我的频道
    async addChannel (channel) {
      console.log(channel)
      /**
       * 1. 准备后台需要的数据=》我的频道+当前选择的（即将要加进去的）
       * - 后台需要排序  [{id:'频道ID',seq:'排序'}] 必须
         - 本地需要 {id:'频道ID',name:'频道名称'}
         2. 调用接口添加我的频道数据
       */
      const newChannels = this.myChannels.map((item, i) => {
        return {
          id: item.id,
          seq: i
        }
      })
      newChannels.push({ ...channel, seq: newChannels.length })
      // 后台不需要第一个推荐=》删除
      newChannels.shift()
      console.log(newChannels)
      // 调用后台接口
      try {
        await addChannel(newChannels)
        // 前端新增当前点击的频道数据
        this.myChannels.push({ ...channel })
        this.$toast.success('添加成功')
      } catch (error) {
        this.$toast.fail('添加失败')
      }
    },
    // 删除我的频道
    /**
     * id 频道ID
     * i 删除频道的索引
     */
    async delChannel (id, i) {
      /**
       * 实现思路：
       * 1. 调用删除接口（数据库）
       * 2. 前端删除（本地data数据）
       */
      try {
        await delChannel(id)

        /**
         * 父传子的数据：子改父
         * 1. 值类型不能直接修改=》自定义事件
         * 2. 引用类型可以直接修改
         */
        this.myChannels.splice(i, 1)
        /**
         * 如果当前选中频道之前的频道被删除=》需要向前进一位
         */
        if (i < this.activeIndex) {
          this.$emit('update:activeIndex', this.activeIndex - 1)
        }

        this.$toast.success('删除成功！')
      } catch (error) {
        this.$toast.fail('删除失败！')
      }
    },
    // 获取所有频道数据
    async getAll () {
      const { data } = await getAllChannels()
      // console.log(data)
      this.allChannels = data.channels
    },
    // 点击根据索引值进入某个频道
    enterChannel (i) {
      /**
       * 思路：
       * 1. 修改父组件activeIndex数据
       * 2. 关闭弹出层
       */
      this.$emit('update:activeIndex', i)
      this.$emit('input', false)
    }
  }
}
</script>
<style lang="less" scoped>
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.van-action-sheet {
  max-height: 100%;
  height: 100%;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close,
    .van-action-sheet__close {
      color: #fff;
    }
  }
}
.channel {
  padding: 10px;
  .tit {
    line-height: 3;
    text-align: left;
    .tip {
      font-size: 10px;
      color: #999;
    }
  }
  .van-button {
    float: right;
    margin-top: 7px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ddd;
    font-size: 12px;
    color: #fff;
  }
  .f12 {
    font-size: 12px;
    color: #555;
  }
  .red {
    color: red;
  }
}
</style>
